<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:t="http://myfaces.apache.org/tomahawk">
<h:body>

	<ui:composition template="../template/template.xhtml">


		<ui:define name="content">
			<p:panel header="calendar">

				<p:schedule value="#{clientScheduleJSF.clientScheduleModel}"
					widgetVar="myschedule" locale="de">

					<p:ajax event="eventSelect"
						listener="#{clientScheduleJSF.onEventSelect}"
						update="eventDetails" oncomplete="eventDialog.show()" />

				</p:schedule>

				<p:dialog widgetVar="eventDialog" header="appointment details"
					showEffect="fade" hideEffect="fade" modal="true">
					<h:panelGrid id="eventDetails" columns="1">
						<p:accordionPanel>
							<p:tab title="service">
								<table>
									<tr>
										<td><h:outputLabel for="serviceName" value="service" /></td>
										<td><p:inputText readonly="true"
												value="#{clientScheduleJSF.event.serviceName}"
												id="serviceName" /></td>
									</tr>
									<tr>
										<td><h:outputLabel for="serviceDescription"
												value="description" /></td>
										<td><p:inputTextarea readonly="true"
												value="#{clientScheduleJSF.event.serviceDescription}"
												id="serviceDescription" /></td>
									</tr>
									<tr>
										<td><h:outputLabel for="start" value="start" /></td>
										<td><p:inputText readonly="true"
												value="#{clientScheduleJSF.event.appointmentStart}"
												id="start">
												<f:convertDateTime pattern="dd-MM-yyyy HH:mm" timeZone="CET" />
											</p:inputText></td>
									</tr>
									<tr>
										<td><h:outputLabel for="end" value="end" /></td>
										<td><p:inputText readonly="true"
												value="#{clientScheduleJSF.event.appointmentEnd}" id="end">
												<f:convertDateTime pattern="dd-MM-yyyy HH:mm" timeZone="CET" />
											</p:inputText></td>
									</tr>
								</table>
							</p:tab>

							<p:tab title="provider">
								<table>
									<tr>
										<td><h:outputLabel for="providerName" value="name" /></td>
										<td><p:inputText readonly="true"
												value="#{clientScheduleJSF.event.clientProviderForename} #{clientScheduleJSF.event.clientProviderSirname}"
												id="providerName" /></td>
									</tr>
									<tr>
										<td><h:outputLabel for="providerPhone"
												value="phone number" /></td>
										<td><p:inputText readonly="true"
												value="#{clientScheduleJSF.event.clientProviderPhoneNumber}"
												id="providerPhone" /></td>
									</tr>
									<tr>
										<td><h:outputLabel for="providerMail" value="email" /></td>
										<td><p:inputText readonly="true"
												value="#{clientScheduleJSF.event.clientProviderEmail}"
												id="providerMail" /></td>
									</tr>
								</table>
							</p:tab>

							<p:tab title="location">
								<table>
									<tr>
										<td><h:outputLabel for="country" value="country" /></td>
										<td><p:inputText readonly="true"
												value="#{clientScheduleJSF.event.locationCountry}"
												id="country" /></td>
									</tr>
									<tr>
										<td><h:outputLabel for="city" value="city" /></td>
										<td><p:inputText readonly="true"
												value="#{clientScheduleJSF.event.locationCity}" id="city" /></td>
									</tr>
									<tr>
										<td><h:outputLabel for="zip" value="zip" /></td>
										<td><p:inputText readonly="true"
												value="#{clientScheduleJSF.event.locationZip}" id="zip" /></td>
									</tr>
									<tr>
										<td><h:outputLabel for="street" value="street" /></td>
										<td><p:inputText readonly="true"
												value="#{clientScheduleJSF.event.locationStreet}"
												id="street" /></td>
									</tr>
								</table>
							</p:tab>
						</p:accordionPanel>

						<h:form>
							<p:commandButton value="cancel" styleClass="bottomButton"
								action="#{clientScheduleJSF.cancelAppointment}" />
						</h:form>

					</h:panelGrid>
				</p:dialog>
			</p:panel>
		</ui:define>



	</ui:composition>

</h:body>

</html>